<template>
	<div>






		<el-dialog title="用户信息修改" :visible.sync="updateModelVisible">
			<el-form label-width="100px">
				<el-form-item label="账号">
					<el-input v-model="updateUser.userAccount" placeholder="请输入内容" :disabled="true"></el-input>
				</el-form-item>
				<el-form-item label="用户名">
					<el-input v-model="updateUser.userName" placeholder="请输入内容"></el-input>
				</el-form-item>

				<el-form-item label="电话">
					<el-input v-model="updateUser.userPhone" placeholder="请输入内容"></el-input>
				</el-form-item>
				<el-form-item label="状态">
					<el-switch v-model="updateUser.userStatus" active-color="#13ce66" inactive-color="#ff4949"
						:active-value="0" :inactive-value="1" active-text="正常" inactive-text="禁用">
					</el-switch>
				</el-form-item>

				<el-form-item label="修改头像">
					<el-upload class="upload-demo" ref='upload' action="http://localhost:8080/file/upload"
						:on-success="successUpdateFile" list-type="picture">
						<img v-if="updateUser.userImage" :src="updateUser.userImage" class="avatar"
							style="width: 200px;">
						<el-button size="small" type="primary">点击上传</el-button>
					</el-upload>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="updateUserInfo">修改</el-button>
			</div>
		</el-dialog>









		<el-dialog title="新增用户" :visible.sync="isAddVisible">
			<el-form label-width="100px">
				<el-form-item label="账号">
					<el-input v-model="addNewUser.userAccount" placeholder="请输入内容"></el-input>
				</el-form-item>
				<el-form-item label="密码">
					<el-input v-model="addNewUser.userPassword" placeholder="请输入内容"></el-input>
				</el-form-item>
				<el-form-item label="电话">
					<el-input v-model="addNewUser.userPhone" placeholder="请输入内容"></el-input>
				</el-form-item>
				<el-form-item label="姓名">
					<el-input v-model="addNewUser.userName" placeholder="请输入内容"></el-input>
				</el-form-item>


				<el-form-item label="上传头像">
					<el-upload class="upload-demo" ref='upload' action="http://localhost:8080/file/upload"
						:on-success="successFile" list-type="picture">
						<img v-if="addNewUser.userImage" :src="addNewUser.userImage" class="avatar"
							style="width: 200px;">
						<el-button size="small" type="primary">点击上传</el-button>
					</el-upload>
				</el-form-item>

			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="clearAddForm">重置</el-button>
				<el-button type="primary" @click="addUser">添加</el-button>

			</div>
		</el-dialog>




		<el-dialog title="授权" :visible.sync="addModel">
			<el-form label-width="100px">
				<el-checkbox-group v-model="addrolesUsers.roleIds">
					<el-checkbox v-for="role in roles" :label="role.roleId" :key="role.roleId">
						{{role.roleName}}
					</el-checkbox>
				</el-checkbox-group>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<!-- <el-button>重置</el-button> -->
				<el-button type="primary" @click="saveAccountRole">授权</el-button>
			</div>
		</el-dialog>


		<div id="">






			<div class="searchWord">

				<el-form :inline="true" class="demo-form-inline">
					<el-form-item label="状态">
						<el-select clearable placeholder="请选择" v-model="findParam.status">
							<el-option label="全部" value="null">
							</el-option>
							<el-option label="正常" value="0">
							</el-option>
							<el-option label="禁用" value="1">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="模糊条件">
						<el-input v-model="findParam.key" style="width: 300px;" class='searchs' placeholder="请输入搜索内容">
						</el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" icon="el-icon-search" @click="search()" round>查询</el-button>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" plain @click="oppenUserModel()">新增用户</el-button>
					</el-form-item>
					<el-form-item>
						<el-button type="danger" icon="el-icon-delete" circle :disabled="this.deleIds.length === 0"
							@click="deleteUser"></el-button>
					</el-form-item>
				</el-form>









			</div>

			<el-table :data="listAccounts" style="width: 100%" border @selection-change="handleSelectionChange">
				<el-table-column type="selection" width="55">
				</el-table-column>
				<el-table-column prop="userAccount" label="账号" width="180">
				</el-table-column>
				<el-table-column prop="userName" label="用户名" width="180">
				</el-table-column>
				<el-table-column prop="userPhone" label="电话" width="180">
				</el-table-column>

				<el-table-column sortable label="状态" width="180">
					<template slot-scope="scope">
						{{ scope.row.userStatus == 1 ? '禁用' : '正常' }}
					</template>
				</el-table-column>


				<el-table-column label="头像" width="80">
					<template slot-scope="scope">
						<el-image style="width: 30px; height: 30px" :src="scope.row.userImage"
							:preview-src-list="[scope.row.userImage]">
							<div slot="error" class="image-slot">
								<i class="el-icon-picture-outline"></i>
							</div>
						</el-image>
					</template>
				</el-table-column>




				<el-table-column fixed="right" label="操作" width="300">
					<template slot-scope="scope">
						<el-button type="warning" plain @click="openUpdateUsersModel(scope)">修改</el-button>
						<el-button type="primary" @click="authorization(scope)" plain>授权</el-button>
					</template>

				</el-table-column>
			</el-table>
		</div>
		<div id="">
			<el-pagination :current-change="findParam.indexPage" background layout="sizes,prev, pager, next, jumper"
				:total="total" :page-sizes="size" :page-size="findParam.pageSize" @current-change="changePage"
				@size-change="changePageSize">
			</el-pagination>


		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				updateUser: [],
				findParam: {
					key: null,
					indexPage: 1, //当前页码
					pageSize: 5, //当前页码能看几条
					// 给他一个默认值可以修改
					status: null
				},
				addNewUser: {
					userAccount: null, //账号
					userPassword: null, //密码
					userPhone: null, //电话
					userName: null, //姓名
					userImage: null //头像路径
				},
				isAddVisible: false,
				updateModelVisible: false,
				roles: [],
				listAccounts: [],
				total: 0,
				size: [3, 5, 10, 20, 30],
				addModel: false,
				addrolesUsers: {
					userId: null,
					roleIds: []
				},
				deleIds: []
			}

		},
		methods: {
			deleteUser() {
				// console.log(this.deleIds)
				this.$http.post('/user-table/removeUserByIds.do', this.deleIds)
					.then(resp => {
						if (resp.data.code == 200) {

							this.$message({
								type: 'success',
								message: '删除成功 '
							});
							this.ListUsers();
							//初始化勾选
							// this.deleIds = [];
						} else {
							this.$message({
								type: 'error',
								message: '删除失败 ' + resp.data.msg
							});
						}

					})

			},
			handleSelectionChange(val) {
				//获取勾选的内容

				//初始化
				this.deleIds = [];
				for (let i = 0; i < val.length; i++) {
					this.deleIds.push(val[i].userId);
				}
			},
			updateUserInfo() {
				this.$http.post('/user-table/updateUser.do', this.updateUser)
					.then(resp => {
						if (resp.data.code == 200) {

							this.$message({
								type: 'success',
								message: '修改成功 '
							});
							this.ListUsers();
							this.updateModelVisible = false;

							//初始化勾选
							// this.dele.ids = [];

							this.updateUser = [];
						} else {
							this.$message({
								type: 'error',
								message: '修改失败 ' + resp.data.msg
							});
						}

					})
			},
			openUpdateUsersModel(scope) {
				//打开窗口
				this.updateModelVisible = true;

				this.$http.get("/user-table/findUserById/" + scope.row.userId).then(resp => {
					if (resp.data.code == 200) {
						let obj = resp.data.data;
						this.updateUser = resp.data.data;
						// console.log(this.updateUser)
						//下拉框只能是string
						// this.updateUser.infoGenres = resp.data.data.infoGenres.toString();

					} else {
						this.$message({
							type: 'error',
							message: '查询数据失败 '
						});

					}


				})
			},
			clearAddForm() {
				this.addNewUser = {
					userAccount: null, //账号
					userPassword: null, //密码
					userPhone: null, //电话
					userName: null, //姓名
					userImage: null //头像路径
				}
			},
			addUser() {
				this.$http.post('/user-table/SaveUser.do', this.addNewUser)
					.then(resp => {
						if (resp.data.code == 200) {
							this.$message({
								type: 'success',
								message: '添加成功 '
							});
							this.$refs.upload.clearFiles();
							this.isAddVisible = false;
							this.ListUsers();
							// this.dele.ids = [];
							this.clearAddForm()
						} else {
							this.$message({
								type: 'error',
								message: '添加失败 ' + resp.data.msg
							});

						}


					})
			},
			successFile(response, file, fileList) {

				this.addNewUser.userImage = response.data;

			},
			successUpdateFile(response, file, fileList) {
				this.updateUser.userImage = response.data;
			},
			oppenUserModel() {
				this.isAddVisible = true;
			},
			search() {
				this.ListUsers();
			},
			//加载电影
			ListUsers() {

				this.$http.post("/user-table/listUsers.do", this.findParam)
					.then(resp => {
						if (resp.data.code = 200) {
							this.listAccounts = resp.data.data.list;
							this.total = resp.data.data.total;
							this.findParam.indexPage = resp.data.data.indexPage;
							this.deleIds = [];
						}

					})
			},
			changePage(page) {
				this.findParam.indexPage = page;
				this.ListUsers();
			},
			changePageSize(size) {
				this.findParam.pageSize = size;
				this.ListUsers();
			},
			authorization(scope) {
				this.checkedRoleIds = [];


				this.addModel = true;
				this.addrolesUsers.userId = scope.row.userId;
				this.$http.post("/role-table/listRolesByUserId.do/" + this.addrolesUsers.userId)
					.then(resp => {
						if (resp.data.code = 200) {
							this.roles = resp.data.data.list;
							this.addrolesUsers.roleIds = resp.data.data.checkedRoleIds;
						}

					})
				// alert(scope.row.userId)
			},
			saveAccountRole() {


				this.$http.post("/user-table/saveUserRole.do", this.addrolesUsers).then(resp => {
					if (resp.data.code = 200) {
						this.$message({
							type: 'success',
							message: '授权成功 '
						});
						this.ListUsers();
						this.addModel = false;
					} else {
						this.$message({
							type: 'error',
							message: '授权失败 '
						});
					}
				})

			}

		},
		created() {
			this.ListUsers();
		}
	}
</script>

<style scoped>

</style>
